<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
    <meta charset="UTF-8">
    <title>我的问答 - 企业培训平台</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <style>
        .qa-container { max-width: 900px; margin: 20px auto; }
        .tab-nav { display: flex; border-bottom: 2px solid #dee2e6; margin-bottom: 20px; }
        .tab-nav-item { padding: 10px 20px; cursor: pointer; font-size: 1.1em; border-bottom: 2px solid transparent; margin-bottom: -2px;}
        .tab-nav-item.active { color: #007bff; border-color: #007bff; }
        .tab-content { display: none; }
        .tab-content.active { display: block; }
        .question-list-item { background: #fff; border: 1px solid #e9ecef; padding: 15px; border-radius: 5px; margin-bottom: 10px; }
        .question-list-item a { text-decoration: none; color: #0d6efd; font-size: 1.2em; font-weight: bold; }
        .question-meta { font-size: 0.9em; color: #6c757d; margin-top: 8px; }
        .status-resolved { color: #198754; font-weight: bold; }
        .status-unresolved { color: #dc3545; font-weight: bold; }
        .empty-message { padding: 20px; background-color: #f8f9fa; border-radius: 5px; text-align: center; color: #6c757d;}
    </style>
</head>
<body>
<div th:replace="~{fragments/header :: header}"></div>

<div class="main-content">
    <div class="qa-container">
        <h1 class="page-title">我的问答</h1>

        <div class="tab-nav">
            <div class="tab-nav-item active" onclick="showTab('asked')">我提出的问题</div>
            <div class="tab-nav-item" onclick="showTab('answered')">我回答的问题</div>
        </div>

        <div id="asked" class="tab-content active">
            <div th:if="${#lists.isEmpty(askedQuestions)}" class="empty-message">
                您还没有提出任何问题。
            </div>
            <div th:each="q : ${askedQuestions}" class="question-list-item">
                <a th:href="@{/qa/detail/{id}(id=${q.id})}" th:text="${q.title}"></a>
                <div class="question-meta">
                    <span th:if="${q.hasResolved == 1}" class="status-resolved">已解决</span>
                    <span th:if="${q.hasResolved == 0}" class="status-unresolved">未解决</span>
                    | <span th:text="${q.commentNum} + ' 个回答'"></span>
                    | <span>创建于: <span th:text="${#temporals.format(q.createTime, 'yyyy-MM-dd')}"></span></span>
                </div>
            </div>
        </div>

        <div id="answered" class="tab-content">
            <div th:if="${#lists.isEmpty(answeredQuestions)}" class="empty-message">
                您还没有回答过任何问题。
            </div>
            <div th:each="q : ${answeredQuestions}" class="question-list-item">
                <a th:href="@{/qa/detail/{id}(id=${q.id})}" th:text="${q.title}"></a>
                <div class="question-meta">
                    提问者: <span th:text="${q.username}"></span>
                    | <span th:text="${q.commentNum} + ' 个回答'"></span>
                    | <span>创建于: <span th:text="${#temporals.format(q.createTime, 'yyyy-MM-dd')}"></span></span>
                </div>
            </div>
        </div>

    </div>
</div>

<script>
    function showTab(tabId) {
        // Hide all tab contents
        document.querySelectorAll('.tab-content').forEach(function(tabContent) {
            tabContent.classList.remove('active');
        });
        // Remove active class from all nav items
        document.querySelectorAll('.tab-nav-item').forEach(function(navItem) {
            navItem.classList.remove('active');
        });

        // Show the selected tab content
        document.getElementById(tabId).classList.add('active');
        // Add active class to the clicked nav item
        event.currentTarget.classList.add('active');
    }
</script>

</body>
</html>